<template>
  <div class="wrap">
    <ul class="fuwu">
      <li class="item">
        <img :src="fuwuImg[0]" alt="">
        <div class="title">
          <h3>一对一服务</h3>
          <p class="ms" >客户经理一对一上门服务</p>
        </div>
      </li>
      <li class="item">
        <img :src="fuwuImg[1]" alt="">
        <div class="title">
          <h3>全程协助理赔</h3>
          <p class="ms">车辆一旦出险我们帮助理赔</p>
        </div>
      </li>
      <li class="item">
        <img :src="fuwuImg[2]" alt="">
        <div class="title">
          <h3>400-7801-998</h3>
          <p class="ms">7×24h客服随时为您解答</p>
        </div>
      </li>
    </ul>
    <div class="fenb">
      <div class="bq">
        <p>版权所有www.fenbei88.com</p>
        <p>浙ICP备19005294号</p>
      </div>
      <div class="right">
        <div class="pic">
          <img :src="fenbImg[0]" alt="">
          <p>车险分期</p>
        </div>
        <div class="pic">
          <img :src="fenbImg[1]" alt="">
          <p>关注"纷呗车险"</p>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'IndexFooter',
  data () {
    return {
      fuwuImg: [
        require('@/assets/img/index/f-fu-1.png'),
        require('@/assets/img/index/f-fu-2.png'),
        require('@/assets/img/index/f-fu-3.png')
      ],
      fenbImg: [
        require('@/assets/img/index/f-logo-1.png'),
        require('@/assets/img/index/f-logo-2.png')

      ]
    }
  }

}
</script>

<style scoped lang='scss'>
  .wrap{
    width: 100%;
    height: 225px;
    background: #7a7a7a;
    margin-top: 10px;
    font-size: 20px;
    color: #fff;
    .fuwu{
      display: flex;
      justify-content: space-around;
      .item{
        margin-top: -10px;
        height: 70px;
        display: flex;
        img{
          height: 70px;
        }
        .title{
          margin-left: -5px;
          h3{
            margin-top: 20px;
            font-size: 24px;
            font-weight: bold;
          }
          .ms{
            font-size: 12px;
            line-height: 30px;
          }
        }
      }
    }
    .fenb{
      width: 100%;
      padding: 0 40px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 168px;
      .bq{
        font-weight: normal;
        font-size: 22px;
      }
      .right{
        display: flex;
        .pic{
          width: 120px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          img{
            width: 73px;
            height: 73px;
          }
          p{
            padding-top: 10px;
            font-weight: 100;
            font-size: 16px;
          }
        }

      }

    }
  }
</style>
